<template>
        <div class="mui-content mui-scroll-wrapper">
            <header class="mui-bar mui-bar-nav bg-color">
                <span class="mui-pull-left Tit" id="allremove"  @tap="allsel">{{selMsg}}</span>
                <!--标题-->
                <h1 class="mui-title" >消息中心</h1>
                <span class="mui-pull-right Tit" @tap="gtolast">取消</span>
            </header>
            <!-- 热门资讯 -->
            <div class="mui-scroll">
                <div class="info-list">
                    <div class="info-tab">
                        <div class="tab-item"  v-for="(v,i) in msgCenterList">
                           <!--  <div class="tab-item-left">
                                <p >{{formatTime(v)}}</p>
                                <p><span >{{formatTitle(v)}}</span></p>
                                <p><span >您的订单{{formatMsg(v)}}!</span></p>
                            </div> -->
                             <li class="tab-item-left" style="list-style: none;">
                                <div class="msg-neir">
                                    <div class="msg-top">
                                        <span>{{formatTime(v)}}</span>
                                    </div>
                                    <div class="all-msg" >
                                        <p class="tit">{{formatTitle(v)}}</p>
                                        <p class="msg">您的订单{{formatMsg(v)}}!</p>
                                    </div>
                                </div>
                            </li>
                            <div class="tab-item-ipt" >
                                <a class="mui-checkbox mui-left">
                                    <input name="checkbox" :value="i" type="checkbox"  v-model="msgs" style="left:0px;top:50px;">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
            <!--删除-->
            <div class="affirm">
                <div class="afm" :style="{'background':msgs.length?'#ff6a27':'#b2b2b2'}" @tap="clearAttent()">删除</div>
            </div>  
            <!--空时显示-->
            <div class="empty ng-scope" v-if="msgCenterList.length === 0 ">
                <div class="empty-item">
                    <div class="icon-zanwu-01" style="font-size:5rem;text-align:center;color:#999;">
                        <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span><span class="path16"></span><span class="path17"></span><span class="path18"></span><span class="path19"></span>
                    </div>
                    <div class="item-text">暂无消息</div>
                </div>
            </div>
        </div>  
</template>

<script>
    import mui from 'static/js/mui.js'
    import storage from '@/utils/localstorage'
    import utils from '@/utils/utils'
     export default {
        components: {},
        data() {
            return{
                noCarPic:'static/img/noCarPic.png',
                selMsg:"全选",
                //ajax拿过来的数据
                msgCenterList:[
                    ["3703|开迪 2005款 1.6L 功能型5座1|2|1527840814|1"], 
                    ["3703|开迪 2005款 1.6L 功能型5座2|1|1527840806|1"],
                    ["3703|开迪 2005款 1.6L 功能型5座3|2|1527840814|1"], 
                    ["3703|开迪 2005款 1.6L 功能型5座4|1|1527840806|1"],
                    ["3703|开迪 2005款 1.6L 功能型5座5|2|1527840814|1"], 
                    ["3703|开迪 2005款 1.6L 功能型5座6|1|1527840806|1"],
                    ["3703|开迪 2005款 1.6L 功能型5座7|2|1527840814|1"], 
                    ["3703|开迪 2005款 1.6L 功能型5座8|1|1527840806|1"],
                    ["3703|开迪 2005款 1.6L 功能型5座9|2|1527840814|1"], 
                    ["3703|开迪 2005款 1.6L 功能型5座10|1|1527840806|1"]
                ],
                //通过双向绑定拿过来的msgs数组  删除的时候传参用
                msgs:[]
            }
        },
        props: {},
        watch: {
            msgs:{ // 监视双向绑定的数组变化
                handler(){
                    //console.log(this.msgs)
                    //判断双向绑定后的carIds数组是否与ajax的拿过来所有关注的集合是否相等  相等说明都被选中了跳出全不选
                    if(this.msgs.length == this.msgCenterList.length){
                        this.selMsg="全不选"
                    //不相等说明部分没有选中 则变为全选功能
                    }else {
                        this.selMsg="全选"
                    }
                },
                deep: true//深度监视
            }
        },
        methods: {
            //删除已选的关注车型
            clearAttent(){
                for(var j=0;j<this.msgs.length;j++){
                    //console.log(this.msgs.length)
                    if(j==0){
                        this.msgCenterList.splice(this.msgs[j],1)
                    }else{
                        this.msgCenterList.splice(this.msgs[j]-j,1)
                    }
                }
                storage.setLocalstorage('userAction',this.msgCenterList.reverse())
                var ch=document.getElementsByName("checkbox");
                for(var i=0;i<ch.length;i++){
                    ch[i].checked=false
                    this.msgs.splice(0,1)//每次删除数组的第一个元素
                }
                //this.getAllcarAtn()//删除过后 继续请求关注接口  获取所有关注车型
            },
            //全选 or 全不选
            allsel(){
                if(this.selMsg==="全选"){//如果是全选  则全部选 并且循环放入carIds 是数组中去
                    var ch=document.getElementsByName("checkbox");
                    for(var i=0;i<ch.length;i++){
                        ch[i].checked=true
                        //判断数组中是否已经存在此元素
                        if(this.msgs.indexOf(Number(ch[i].value)) == '-1'){ 
                            this.msgs.push(Number(ch[i].value))
                        }
                    }
                }
                if(this.selMsg==="全不选"){//如果是全选  则全部不选 并且循环删除数组元素
                    var ch=document.getElementsByName("checkbox");
                    for(var i=0;i<ch.length;i++){
                        ch[i].checked=false
                        this.msgs.splice(0,1)//每次删除数组的第一个元素
                    }
                }
            },
            //返回上一层
            gtolast(){
              this.$router.go(-1);//返回上一层
            },
            formatTime(v){
               let a = utils.time.formatDatetwo( v[0].split('|')[3])
                return a
            },
            formatTitle(v){
                let a = v[0].split('|')[1]
                return a 
            },
            formatMsg(v){
               let a = v[0].split('|')[2]
               let msg = ''
               switch (a) {
                    case '1':   
                        msg = '进入询价'
                        break;
                    case '2':    
                        msg = '已支付询价金'
                        break;
                    case '3':   
                        msg = '	进入拼单' 
                        break;
                    case '4':
                        msg = '已支付拼单金'     
                        break;
                    case '5':  
                        msg = '已转入拼单'   
                        break;
                    case '6':   
                        msg = '已转入订单'  
                        break;
                    case '7':    
                        msg = '已付订金，等待联系' 
                        break;
                    case '8':   
                        msg = '订单失效'  
                        break;
               }
               return msg 
            }
        },
       
        created() {
            this.msgCenterList = storage.getLocalstorage('userAction').reverse()
        },
        mounted() {
            mui.init({
                keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            })
            mui.back = function () {
                history.go(-1)
            }
            //竖向滚动
            scroll = mui('.mui-scroll-wrapper').scroll({
                scrollY: true, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: false, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: false //是否启用回弹
            })
        },
        destroyed() { }
    }


</script>

<style lang="scss" scoped>
    .mui-checkbox input[type="checkbox"]:checked:before {
        color: #ff6a27;
    }


    .Tit{
        line-height: 43px;
        font-size: 0.7rem;
        color:#666666;
    }
    .noMoreMsg{
        text-align:center;color:#AEAEAE;
        padding:15px;font-size:0.7rem;
    }
    .bg-color{
        -webkit-box-shadow: 0 0px 0px !important;
        box-shadow: 0 0px 0px !important;
    }
    .mui-bar {
        z-index:2;
        background-color: #fff;
        -webkit-box-shadow:none;
        box-shadow:none;
        border-bottom:1px solid #ddd;
    }
    .header_fanhui{
        line-height: 43px;
        font-size: 0.9rem;
        width: 43px;
    }
    p{
      color:#333333!important;
      margin-bottom:4px;
    }
    .info-list{
        width:100%;
        height:auto;
        margin-top:54px;
        margin-bottom:40px;
        .info-top{
            overflow:hidden;
            background:#fff;
            color:#333333;
            font-size:0.7rem;
            padding:8px 12px  8px 12px;
        }
        .info-tab{
          .tab-item{
              width:100%;
              /* background:#fff; */
              overflow:hidden;
              padding:0px 0px 0px 12px;
              .tab-item-left{
                  float:right;
                  width:90%;
                  height:116px;
                  p{
                      line-height:20px;
                      padding-bottom:0px;
                      font-size:0.6rem;
                  }
              }
              .tab-item-right{
                  float:right;
                  width:42%;
                height:90px; 
                  text-align:center;
                  img{
                      height:100%;
                  }
              }
              .tab-item-ipt{
                  width:10%;
                  float:left;

              }
          }
        }
    }

    .msg-neir{
        padding:0px 12px 0px 0px;
        border:1px solid #f5f5f5;
        .msg-top{
                text-align:center;
                margin:0px 0px 10px 0px;
            span{
                background:#B8B8B8;
                color:#fff;
                padding:2px 5px 2px 5px;
                font-size:0.5rem;
            }
        }
        .all-msg{
            background:#fff;padding:12px;
            border-radius:2px;
            .tit{
                font-size:0.7rem;   
                color:#333333;
                border-bottom:1px solid #F8F8F8;
                padding-bottom:10px; 
            }
            .msg{
                font-size:0.65rem;
                color:#999999;
            }
        }
    }


    /**确认按钮*/
    .affirm {
        bottom: 20px;
        left: 5%;
        width: 90%;
        height: 40px;
        position: absolute;
        z-index:999999;
        opacity:0.9;
        .afm {
            height: 40px;
            border: 1px solid #ddd;
            background-color: #b2b2b2;
            margin: 0 auto;
            color: #fff;
            border-radius: 3px;
            text-align: center;
            line-height: 40px;
            font-size:15px;
        }
    }

    /* 商品空时 */
    .empty {
        position: relative;
        display: block;
        width: 100%;
        position:absolute;
        top:43px;
        bottom:0px;
        overflow: hidden;
        background:#fff;
    }

    .empty .empty-item {
        position: absolute;
        left: 0;
        top: 35%;
        display: block;
        width: 100%;
    }

    .empty .empty-item .item-logo {
        display: block;
        margin: 0 auto;
        width: 80px;
        height: 80px;
    }

    .empty .empty-item .item-text {
        display: block;
        height: 32px;
        line-height: 32px;
        color: #aaaaaa;;
        font-size: 14px;
        font-weight: normal;
        overflow: hidden;
        text-align: center;
    }   
</style> 

    